<template>
  <el-input
    style="width: 100%"
    :value="value | formCurrency(isBlur, isFormatNumber)"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    :clearable="clearable"
    @input="inputHandler"
    @change="inputChangeHandler"
    @blur="inputBlurHandler"
    @focus="inputFocusHandler"
    :maxlength="maxlength || 32"
  >
    <template v-if="append != ''" slot="append">{{ append }}</template>
  </el-input>
</template>
<script>
export default {
  name: 'InputNumber',
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    append: {
      type: String,
      default: () => '',
    },
    max: {
      type: [String, Number],
      default: '1.7976931348623157e+308',
    },
    min: {
      type: [String, Number],
      default: '-9007199254740991',
    },
    precision: {
      type: Number,
      default: 2,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    maxlength: {
      type: String,
      default: '32',
    },
    isFormatNumber: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isBlur: false,
    };
  },
  methods: {
    //number限制长度和位数
    inputHandler(value) {
      // 去除非数字输入
      if (!/^-?\d+([\.]\d+)?$/gi.test(value) && !value.endsWith('.')) {
        const val1 = value.split('');
        val1.pop();
        value = val1.join('');
      }
      if (this.min < 0) {
        this.lowerZero(value);
      } else {
        value = value.toString();
        if (value[0] == '0' && value[1] == '0') {
          value = '0';
        }
        if (value[0] == '0' && value[1] != '.' && value.length > 1) {
          value = value.replace(/\b(0+)/gi, '');
        }
        this.overZero(value);
      }
    },
    // 原有正数判断逻辑
    overZero(value) {
      if (this.precision == 0) {
        value = value.toString().replace(/[^\d]+/g, '');
      } else {
        value = value.toString().replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
        value = value.toString().replace(/^\./g, ''); //验证第一个字符是数字
        value = value.toString().replace(/\.{2,}/g, '.'); //只保留第一个, 清除多余的
        value = value.toString().replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        if (this.precision == 1) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一位小数
        }
        if (this.precision == 2) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两位小数
        }
        if (this.precision == 3) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3'); //只能输入四位小数
        }
        if (this.precision == 4) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); //只能输入四位小数
        }
        if (this.precision == 5) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入五位小数
        }
        if (this.precision == 6) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入六位小数
        }
        if (this.precision == 10) {
          value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入十位小数
        }
      }
      if (Number(value) > Number(this.max)) {
        value = value.substring(0, value.length - 1); //输入超过最大值后，后面输入无效
      }
      if (this.min == 0) {
        //如果input时判断 例如min=9 max=10时 输入1就自动转成9  所以放到change时判断
        if (value && Number(value) < Number(this.min)) {
          value = this.min;
        }
      }
      this.$emit('input', value);
    },
    // 新增负值判断
    lowerZero(value) {
      value = value.toString().replace(/\.{2,}/g, '.'); //只保留第一个, 清除多余的
      value = value.toString().replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      if (this.precision == 1) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3'); //只能输入一位小数
      }
      if (this.precision == 2) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两位小数
      }
      if (this.precision == 3) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3'); //只能输入四位小数
      }
      if (this.precision == 4) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); //只能输入四位小数
      }
      if (this.precision == 5) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入五位小数
      }
      if (this.precision == 6) {
        value = value.toString().replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3'); //只能输入六位小数
      }
      if (Number(value) > Number(this.max)) {
        value = value.substring(0, value.length - 1); //输入超过最大值后，后面输入无效
      }
      if (this.min == 0) {
        //如果input时判断 例如min=9 max=10时 输入1就自动转成9  所以放到change时判断
        if (value && Number(value) < Number(this.min)) {
          value = this.min;
        }
      }
      this.$emit('input', value);
    },
    // 输入框值改变值失去焦点函数
    inputChangeHandler(value) {
      if (this.min != 0 && (value || value == '') && Number(value) < Number(this.min)) {
        //如果input时判断 例如min=9 max=10时 输入1就自动转成9  所以放到change时判断
        value = this.min;
        this.$emit('input', value);
      }
      this.$emit('change', value);
    },
    // 输入框值改变值失去焦点函数
    inputBlurHandler(value) {
      this.isBlur = true;
      this.$emit('blur', value);
    },
    // 输入框获取焦点
    inputFocusHandler(value) {
      this.isBlur = false;
      this.$emit('focus', value);
    },
  },
  filters: {
    formCurrency(value, isBlur, isFormatNumber) {
      if (isBlur && isFormatNumber) {
        const splitValue = value.toString().split('.');
        if (splitValue[1]) {
          return `${splitValue[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${splitValue[1]}`;
        } else {
          return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      } else {
        return value;
      }
    },
  },
};
</script>
